<template>
    <div class="lposts-item">
       <ul>
           <li v-for="i in list" :key="i.id"><span>{{i.id}}</span><p>{{i.title}}</p></li>
       </ul>
    </div>
</template>

<script>
    export default {
        name: "LPostsItem",
        props:['list']
    }
</script>

<style scoped lang="less">
    .lposts-item{
        li{
            margin-bottom: 12px;
        }
        span{
            border-radius: 50%;
            display: block;
            float: left;
            background-color: #fb517e;
            width: 20px;
            height: 20px;
            color: white;
            text-align: center;
            line-height: 20px;
            font-size: 14px;
        }
        p{
            padding-left: 10px;
            width: 230px;
            height: 20px;
            font-size: 13px;
            font-weight: normal;
            font-stretch: normal;
            letter-spacing: 0px;
            color: #fb517e;
            overflow: hidden;
            text-overflow:ellipsis;
            white-space: nowrap;
        }
    }

</style>